<template>
  <div class="articleDetails">
    <!-- 普通文章 -->
    <div class="ordinaryArticles" v-if="postData.type === 1">
      <div class="header">
        <span class="iconfont iconjiantou2" @click="$router.back()"></span>
        <span class="iconfont iconnew"></span>
        <div
          @click="user_follows"
          class="btn"
          :class="{
            upfollow: !postData.has_follow,
          }"
        >
          {{ postData.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="main">
        <div class="title">
          {{ postData.title }}
        </div>
        <div class="info">
          <span class="name">
            {{ postData.user.nickname || postData.user.username }}
          </span>
          2020-10-10
        </div>
        <div class="content" v-html="postData.content"></div>
      </div>
    </div>
    <!-- 视频文章 -->
    <div class="videoArticles" v-if="postData.type === 2">
      <div class="header">
        <span class="iconfont iconjiantou2" @click="$router.back()"></span>
        <span class="iconfont iconnew"></span>
      </div>
      <video
        class="content"
        controls
        poster="http://157.122.54.189:9083/uploads/image/IMG1606459976647.jpeg"
        :src="postData.content"
      ></video>
      <div class="info">
        <img
          v-if="postData.user.head_img"
          :src="postData.user.head_img | flxImgUrl"
          alt=""
        />
        <img v-else src="../../image/2.png" alt="" />
        <div class="name">
          {{ postData.user.nickname || postData.user.username }}
        </div>
        <div
          @click="user_follows"
          class="btn"
          :class="{
            upfollow: !postData.has_follow,
          }"
        >
          {{ postData.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title" v-html="postData.title"></div>
    </div>

    <div class="btns">
      <div class="btn">
        <span
          @click="dianzan"
          class="iconfont icondianzan"
          :class="{
            hasLike: postData.has_like,
          }"
        >
          {{ postData.like_length }}</span
        >
      </div>
      <div class="btn">
        <span class="iconfont iconweixin"> </span>
        微信
      </div>
    </div>

    <div class="commentsNav">精彩跟帖</div>
    <CommentMain
      v-for="comment in commentList"
      :key="comment.id"
      :commentData="comment"
    />
    <div
      class="commentsMore"
      @click="$router.push('/moreComments/' + $route.params.id)"
    >
      更多跟帖
    </div>
    <!-- 父组件接收指令 刷新 获取当前文章的评论列表-->
    <CommentInput @reloadComment="reloadComment" />
    <Return father=".articleDetails" paths="/" />
  </div>
</template>

<script>
import CommentMain from "../components/comment/CommentsMain";
import CommentInput from "../components/comment/Input";
import Return from "@/components/Return";
export default {
  components: { Return, CommentMain, CommentInput },
  data() {
    return {
      postData: {},
      commentList: [],
    };
  },
  mounted() {
    console.log(this.$route.params);
    this.$axios({
      url: "/post/" + this.$route.params.id,
    }).then((res) => {
      console.log(res.data);
      this.postData = res.data.data;
    });
    this.reloadComment();
  },
  methods: {
    reloadComment() {
      this.$axios({
        url: "/post_comment/" + this.$route.params.id,
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data.length > 3) {
          res.data.data.length = 3;
        }
        this.commentList = res.data.data;
      });
    },
    user_follows() {
      if (this.postData.has_follow) {
        this.$axios({
          url: "/user_unfollow/" + this.postData.user.id,
        }).then((res) => {
          console.log(res.data);
          this.postData.has_follow = false;
          this.$toast(res.data.message);
        });
      } else {
        this.$axios({
          url: "/user_follows/" + this.postData.user.id,
        }).then((res) => {
          console.log(res.data);
          this.postData.has_follow = true;
          this.$toast(res.data.message);
        });
      }
    },
    dianzan() {
      this.$axios({
        url: "/post_like/" + this.$route.params.id,
      }).then((res) => {
        console.log(res.data);
        if (res.data.message === "点赞成功") {
          this.postData.has_like = true;
          this.postData.like_length += 1;
          this.$toast(res.data.message);
        } else {
          this.postData.has_like = false;
          this.postData.like_length -= 1;
          this.$toast(res.data.message);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.ordinaryArticles {
  .header {
    display: flex;
    align-items: center;
    padding: 0 14 / 360 * 100vw;
    .iconjiantou2 {
      font-size: 24 / 360 * 100vw;
    }
    .iconnew {
      flex: 1;
      font-size: 54 / 360 * 100vw;
      padding-left: 10 / 360 * 100vw;
    }
    .btn {
      font-size: 16 / 360 * 100vw;
      height: 30 / 360 * 100vw;
      line-height: 30 / 360 * 100vw;
      padding: 0 14 / 360 * 100vw;

      border: 1px solid #888;
      border-radius: 15 / 360 * 100vw;
      &.upfollow {
        background-color: red;
        border: 1px solid red;
        color: #fff;
      }
    }
  }
  .main {
    padding: 0 14 / 360 * 100vw;
    .title {
      font-size: 20 / 360 * 100vw;
      font-weight: 700;
      margin-bottom: 10 / 360 * 100vw;
    }
    .info {
      font-size: 16 / 360 * 100vw;
      color: #888;
      .name {
        padding-right: 10 / 360 * 100vw;
      }
    }
    .content {
      /deep/ img {
        max-width: 100%;
      }
    }
  }
}
.videoArticles {
  .header {
    display: flex;
    align-items: center;
    padding: 0 14 / 360 * 100vw;
    .iconjiantou2 {
      font-size: 24 / 360 * 100vw;
    }
    .iconnew {
      flex: 1;
      font-size: 54 / 360 * 100vw;
      padding-left: 10 / 360 * 100vw;
    }
  }
  .content {
    width: 100%;
  }
  .info {
    display: flex;
    align-items: center;
    padding: 20 / 360 * 100vw 20 / 360 * 100vw;

    img {
      width: 40 / 360 * 100vw;
      height: 40 / 360 * 100vw;
      object-fit: cover;
      border-radius: 50%;
    }
    .name {
      flex: 1;
      font-size: 16 / 360 * 100vw;
      padding-left: 10 / 360 * 100vw;
      color: #888;
    }
    .btn {
      font-size: 16 / 360 * 100vw;
      height: 30 / 360 * 100vw;
      line-height: 30 / 360 * 100vw;
      padding: 0 14 / 360 * 100vw;

      border: 1px solid #888;
      border-radius: 15 / 360 * 100vw;
      &.upfollow {
        background-color: red;
        border: 1px solid red;
        color: #fff;
      }
    }
  }
  .title {
    font-size: 18 / 360 * 100vw;
    padding: 10 / 360 * 100vw 20 / 360 * 100vw;
  }
}
.btns {
  margin-top: 20 / 360 * 100vw;
  display: flex;
  justify-content: space-evenly;
  .btn {
    font-size: 16 / 360 * 100vw;
    height: 30 / 360 * 100vw;
    line-height: 30 / 360 * 100vw;
    padding: 0 14 / 360 * 100vw;

    border: 1px solid #888;
    border-radius: 15 / 360 * 100vw;
  }
  .iconfont {
    font-size: 16 / 360 * 100vw;
  }
  .hasLike {
    color: red;
  }
  .iconweixin {
    color: #04c804;
  }
}
.commentsNav {
  font-size: 16 / 360 * 100vw;
  padding: 20 / 360 * 100vw;
  text-align: center;
  margin-top: 20 / 360 * 100vw;
  border-top: 4 / 360 * 100vw solid #ddd;
}
.commentsMore {
  width: 121 / 360 * 100vw;
  height: 30 / 360 * 100vw;
  line-height: 30 / 360 * 100vw;
  text-align: center;
  margin: 20 / 360 * 100vw auto;
  font-size: 14 / 360 * 100vw;
  border: 1px solid #000;
  border-radius: 15 / 360 * 100vw;
  margin-bottom: 80 / 360 * 100vw;
}
</style>